<template>
  <view class="container">
    <!-- 任务名称 -->
    <view class="task-name">
      <view class="name-head">
        <checkbox
          class="task-done edit-checkbox"
          color="#ccc"
          :checked="workInfo.w_status"
          @click="workInfo.w_status = !workInfo.w_status"
        />
        <span>任务名称</span>
      </view>
      <input
        class="name-input"
        v-model="workInfo.w_name"
        type="text"
        placeholder="请输入任务名称"
      />
    </view>
    <!-- 任务描述 -->
    <view class="task-describe">
      <view class="describe-head">
        <span>任务描述</span>
      </view>
      <textarea
        class="describe-text"
        v-model="workInfo.w_label"
        placeholder="请输入描述......"
      />
    </view>
    <!-- 任务设置 -->
    <view class="task-setting">
      <!-- 工作 -->
      <view class="setting-item" @click="isShowTaskType = true">
        <view class="item_left">
          <!-- <image src="../../static/work (2).png" mode="widthFix" /> -->
          <image :src="taskItemInfo.option.icon" mode="widthFix" />
          <span>{{ taskItemInfo.o_text }}</span>
        </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
      <!-- 时间 -->
      <view class="setting-item" @click="isShowPicker = true">
        <view class="item_left">
          <image src="../../static/time.png" mode="widthFix" />
          <span>{{ settingTime }}</span>
        </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
      <!-- 优先级 -->
      <view class="setting-item">
        <view class="item_left">
          <image src="../../static/priority.png" mode="widthFix" />
          <span>重要</span>
        </view>
        <view class="radio-box">
          <checkbox
            class="switch"
            :checked="workInfo.w_primary"
            @click="workInfo.w_primary = !workInfo.w_primary"
          />
        </view>
      </view>
    </view>
    <!-- 底部功能 -->
    <view>
      <block v-if="taskState">
        <!-- 保存 -->
        <view class="save-btn" @click="saveTask">
          <span>保存</span>
        </view>
      </block>
      <block v-else>
        <view class="foot-box">
          <view @click="collectionTask">
            <span class="collection-icon-active" v-if="isCollection"></span>
            <span class="collection-icon" v-else></span>
            <span>收藏</span>
          </view>
          <view @click="isShowConfirm = true">
            <span class="delete-icon"></span>
            <span>删除</span>
          </view>
        </view>
      </block>
    </view>

    <!-- 是否确认 -->
    <confirm
      v-show="isShowConfirm"
      v-on:closeConfirm="this.isShowConfirm = false"
      v-on:deleteTask="deleteTask"
    />

    <!-- 选择任务箱 -->
    <task-type
      :taskTypeList="taskTypeList"
      v-show="isShowTaskType"
      v-on:cancel="isShowTaskType = false"
      v-on:getTaskItem="getTaskItem($event)"
    />

    <!-- 选择任务时间 -->
    <picker-view
      :isShowPicker="isShowPicker"
      v-on:cancelPicker="isShowPicker = false"
      v-on:getPicker="getPicker($event)"
    />
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Confirm from "../../component/Confirm/Confirm";
import PickerView from "../../component/Picker-View/Picker-View";
import TaskType from "../../component/TaskType/TaskType";
// 引入接口文件
const {
  addWork,
  getWork,
  collectWork,
  delWork,
} = require("../../api/addtask/addtask");
const { format } = require("../../utils/utils");
export default {
  components: { TaskType, PickerView, Confirm },
  data() {
    return {
      taskState: false, // 添加任务(true) or 查看任务(false)
      isCollection: false, // 是否收藏
      isShowConfirm: false, // 是否确定删除
      isShowTaskType: false, // 是否显示任务列表
      isShowPicker: false, // 是否显示选择时间
      uuid: "", // 任务id
      settingTime: "", // 选择时间的文字
      // 添加任务数据参数对象
      workInfo: {
        w_name: "",
        w_label: "",
        w_remind: "",
        w_type: "",
        w_primary: false,
        w_status: false,
        code: "",
      },
      // 任务箱数据
      taskItemInfo: {},
    };
  },
  computed: {
    ...mapState(["taskTypeList"]),
  },
  watch: {},
  methods: {
    ...mapMutations(["editIsGetDataAgain"]),
    // 删除待办
    deleteTask() {
      delWork({ wid: this.uuid }).then(
        res => {
          console.log(res);
          uni.showToast({
            title: "删除成功！",
            icon: "none",
          });
          this.isShowConfirm = false;

          // 需要重新获取首页数据
          this.editIsGetDataAgain(true);
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    },
    // 收藏
    collectionTask() {
      this.isCollection = !this.isCollection;
      let params = {
        wid: this.uuid,
        code: uni.getStorageSync("openId"),
      };
      collectWork(params).then(
        res => {
          this.isCollection == true
            ? uni.showToast({
                title: "收藏成功！",
                icon: "none",
              })
            : uni.showToast({
                title: "取消收藏！",
                icon: "none",
              });
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    },
    // 确定选中的任务列表
    getTaskItem(res) {
      this.taskItemInfo = res;
      this.workInfo.w_type = res.oid;
      this.isShowTaskType = false;
    },
    // 选择日期确定点击
    getPicker(res) {
      const pickerValue = res.detail.__args__[0];

      this.settingTime =
        pickerValue.monthAndDay.sum +
        " " +
        pickerValue.period +
        pickerValue.hours +
        "：" +
        pickerValue.minutes +
        "截止";
      this.workInfo.w_remind = pickerValue.timeValue;

      this.isShowPicker = false;
    },
    // 获取默认时间
    getSettingTime(date) {
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const period = format(date, "hh") < 12 ? "上午" : "下午";

      this.settingTime =
        month +
        "月" +
        day +
        "日 " +
        period +
        format(date, "h") +
        "：" +
        format(date, "mm") +
        "截止";
      this.workInfo.w_remind = format(date, "yyyy-MM-dd hh:mm:ss");
    },

    // 保存任务
    saveTask() {
      if (this.workInfo.w_name == "")
        return uni.showToast({ title: "请输入任务名称", icon: "none" });
      // if (this.workInfo.w_label == "")
      //   return uni.showToast({ title: "请输入任务描述", icon: "none" });
      if (this.workInfo.w_type == "")
        return uni.showToast({ title: "请选择任务分类", icon: "none" });

      this.workInfo.code = uni.getStorageSync("openId");
      this.workInfo.w_primary = this.workInfo.w_primary ? 1 : 0;
      this.workInfo.w_status = this.workInfo.w_status ? 1 : 0;

      // 发送增加请求
      addWork(this.workInfo).then(
        res => {
          console.log(res);
          uni.showToast({
            title: "添加成功！",
            icon: "success",
          });
          // 需要重新获取首页数据
          this.editIsGetDataAgain(true);
          // 清空数据
          this.clearData();
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    },

    // 获取分类数据
    getTaskList() {
      this.taskItemInfo = this.taskTypeList[0];
      this.workInfo.w_type = this.taskTypeList[0].oid;
    },
    // 根据 w_type 显示分类
    activeTaskType(oid) {
      let index = this.taskTypeList.findIndex(item => item.oid == oid);
      this.taskItemInfo = this.taskTypeList[index];
      this.workInfo.w_type = oid;
    },
    // 清空数据
    clearData() {
      this.workInfo.w_name = "";
      this.workInfo.w_label = "";
      this.workInfo.w_primary = false;
      this.workInfo.w_status = false;
      this.settingTime = this.getSettingTime(new Date());
    },
  },
  onLoad(options) {
    if (options.taskState) this.taskState = options.taskState;
    // 获取分类数据
    this.getTaskList();

    // 页面状态
    if (this.taskState) {
      // 获取默认显示的时间
      this.getSettingTime(new Date());
    } else {
      // 根据 uuid 获取任务详情信息
      this.uuid = options.uuid;
      getWork({ wid: this.uuid }).then(
        res => {
          this.workInfo = res;
          this.isCollection = res.favour == 1 ? true : false;
          this.activeTaskType(res.w_type);
          this.getSettingTime(new Date(res.w_remind));
        },
        err => {
          uni.showToast({ title: err, icon: "none" });
        }
      );
    }
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;

  & > view {
    &:first-child {
      margin-top: 0;
    }
    margin-top: 30rpx;
  }
  // 任务名称 & 任务描述
  .task-name,
  .task-describe {
    display: flex;
    flex-direction: column;

    .name-head {
      display: flex;
      align-items: center;

      .task-done {
        padding: 0 10rpx;
      }

      span {
        font-size: 28rpx;
        color: #333333;
      }
    }

    .name-input,
    .describe-text {
      width: auto;
      margin-top: 20rpx;
      padding: 30rpx;
      background-color: #fff;
      border-radius: 8rpx;
    }
  }
  // 任务设置
  .task-setting {
    display: flex;
    flex-direction: column;

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      background-color: #fff;
      border-bottom: 2rpx solid #f2f2f2;

      &:last-child {
        border-bottom: none;
      }

      .item_left {
        display: flex;
        align-items: center;

        image {
          width: 64rpx;
          height: 64rpx;
        }
        span {
          padding: 0 20rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
  // 保存
  .save-btn {
    position: absolute;
    left: 0;
    bottom: 20rpx;
    width: 100%;
    padding: 0 30rpx;
    font-size: 28rpx;

    & span {
      display: inline-block;
      width: 100%;
      height: 88rpx;
      background-color: #666ee8;
      line-height: 88rpx;
      text-align: center;
      color: white;
    }
  }
  // 底部功能
  .foot-box {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8rpx 30rpx;
    background-color: #fff;

    & view {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .collection-icon-active,
      .collection-icon,
      .delete-icon {
        width: 40rpx;
        height: 40rpx;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .collection-icon-active {
        background-image: url("../../static/collection (3).png");
      }

      .collection-icon {
        background-image: url("../../static/collection (2).png");
      }

      .delete-icon {
        background-image: url("../../static/delete (2).png");
      }
    }
  }
}
</style>
